<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="SHIELD - Free Bootstrap 3 Theme">
    <meta name="author" content="Mary Sisalima">
    <link rel="shortcut icon" href="assets/ico/favicon.png">

    <title>XcellentProject</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="assets/css/main.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/icomoon.css">
    <link href="assets/css/animate-custom.css" rel="stylesheet">



    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>

    <script src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/modernizr.custom.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
      <script src="assets/js/respond.min.js"></script>
    <![endif]-->

</head>

<body data-spy="scroll" data-offset="0" data-target="#navbar-main">


    <div id="navbar-main">
        <!-- Fixed navbar -->
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon icon-shield" style="font-size: 30px; color: #3498db;"></span>
                    </button>
                    <a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-shield" style="font-size: 18px; color: #3498db;"></span></a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#home" class="smoothScroll">Home</a></li>
                        <li><a href="#about" class="smoothScroll">About</a></li>
                        <li><a href="#services" class="smoothScroll">Services</a></li>
                        <li><a href="#team" class="smoothScroll">Team</a></li>
                        <li><a href="#portfolio" class="smoothScroll">Portfolio</a></li>
                        <li><a href="#blog" class="smoothScroll">Blog</a></li>
                        <li><a href="#contact" class="smoothScroll">Contact</a></li>
                        <li><a id="login" class="smoothScroll" data-toggle="modal" data-target="#example" href="#">Login</a></li>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>



    <!-- ==== HEADERWRAP ==== -->
    <div id="headerwrap" id="home" name="home">
        <header class="clearfix">
            <h1><span class="icon icon-shield"></span></h1>
            <p>A Bootstrap 3 One Page Theme.</p>
            <p>Exclusive for BlackTie.co.</p>
        </header>
    </div>
    <!-- /headerwrap -->

    <!-- ==== GREYWRAP ==== -->
    <div id="greywrap">
        <div class="row">
            <div class="col-lg-4 callout">
                <span class="icon icon-stack"></span>
                <h2>Bootstrap 3</h2>
                <p>Shield Theme is powered by Bootstrap 3. The incredible Mobile First Framework is the best option to run your website. </p>
            </div>
            <!-- col-lg-4 -->

            <div class="col-lg-4 callout">
                <span class="icon icon-eye"></span>
                <h2>Retina Ready</h2>
                <p>You can use this theme with your iPhone, iPad or MacBook Pro. This theme is retina ready and that is awesome. </p>
            </div>
            <!-- col-lg-4 -->

            <div class="col-lg-4 callout">
                <span class="icon icon-heart"></span>
                <h2>Crafted with Love</h2>
                <p>We don't make sites, we craft themes with love & passion. That is our most valued secret. We only do thing that we love.   </p>
            </div>
            <!-- col-lg-4 -->
        </div>
        <!-- row -->
    </div>
    <!-- greywrap -->

    <!-- ==== ABOUT ==== -->
    <div class="container" id="about" name="about">
        <div class="row white">
            <br>
            <h1 class="centered">A LITTLE ABOUT OUR AGENCY</h1>
            <hr>

            <div class="col-lg-6">
                <p>We believe ideas come from everyone, everywhere. In fact, at BlackTie, everyone within our agency walls is a designer in their own right. And there are a few principles we believe—and we believe everyone should believe—about our design craft. These truths drive us, motivate us, and ultimately help us redefine the power of design. We’re big believers in doing right by our neighbors. After all, we grew up in the Twin Cities and we believe this place has much to offer. So we do what we can to support the community we love.</p>
            </div>
            <!-- col-lg-6 -->

            <div class="col-lg-6">
                <p>Over the past four years, we’ve provided more than $1 million in combined cash and pro bono support to Way to Grow, an early childhood education and nonprofit organization. Other community giving involvement throughout our agency history includes pro bono work for more than 13 organizations, direct giving, a scholarship program through the Minneapolis College of Art & Design, board memberships, and ongoing participation in the Keystone Club, which gives five percent of our company’s earnings back to the community each year.</p>
            </div>
            <!-- col-lg-6 -->
        </div>
        <!-- row -->
    </div>
    <!-- container -->

    <!-- ==== SECTION DIVIDER1 -->
    <section class="section-divider textdivider divider1">
        <div class="container">
            <h1>DESIGN EXPAND BOUNDARIES</h1>
            <hr>
            <p>To achieve real change, we have to expand boundaries. Because the Wild West of what-could-be is unexplored but rife with opportunity.</p>
        </div>
        <!-- container -->
    </section>
    <!-- section -->


    <!-- ==== SERVICES ==== -->
    <div class="container" id="services" name="services">
        <br>
        <br>
        <div class="row">
            <h2 class="centered">ONE BRAND, ONE VOICE.</h2>
            <hr>
            <br>
            <div class="col-lg-offset-2 col-lg-8">
                <p>
                    Employees and consumers. Two halves of a brand’s entirety, the whole of a brand’s audience. Sometimes these two halves have very different viewpoints, creating a weak spot in the brand story. Weakness tarnishes credibility. Brands that aren’t credible aren’t viable.
				
                </p>
                <p>We squash weakness by designing the whole brand story. It’s crafted around the truism held by employees and consumers to create an experience that connects from the inside out.</p>
                <p>By being true to the brand we represent, we elevate the audiences’ relationship to it. Like becomes love becomes a passion. Passion becomes advocacy. And we see the brand blossom from within, creating a whole story the audience embraces. That’s when the brand can truly flex its muscles.</p>
            </div>
            <!-- col-lg -->
        </div>
        <!-- row -->

        <div class="row">
            <h2 class="centered">MOBILE FIRST THINKING, ALWAYS.</h2>
            <hr>
            <br>
            <div class="col-lg-offset-2 col-lg-8">
                <img class="img-responsive" src="assets/img/iphone.png" alt="">
            </div>
            <!-- col -->
        </div>
        <!-- row -->
    </div>
    <!-- container -->


    <!-- ==== SECTION DIVIDER2 -->
    <section class="section-divider textdivider divider2">
        <div class="container">
            <h1>DESIGN IS AN INTERACTION</h1>
            <hr>
            <p>To develop a deeper and more meaningful connection with consumers, we believe design must invite them to take part in the conversation.</p>
        </div>
        <!-- container -->
    </section>
    <!-- section -->

    <!-- ==== TEAM MEMBERS ==== -->
    <div class="container" id="team" name="team">
        <br>
        <div class="row white centered">
            <h1 class="centered">MEET OUR AWESOME TEAM</h1>
            <hr>
            <br>
            <br>
            <div class="col-lg-3 centered">
                <img class="img img-circle" src="assets/img/team/team01.jpg" height="120px" width="120px" alt="">
                <br>
                <h4><b>Mike Arney</b></h4>
                <a href="#" class="icon icon-twitter"></a>
                <a href="#" class="icon icon-facebook"></a>
                <a href="#" class="icon icon-flickr"></a>
                <p>Mike combines an expert technical knowledge with a real eye for design. Working with clients from a wide range of industries, he fully understands client objectives when working on a project, large or small.</p>
            </div>
            <!-- col-lg-3 -->

            <div class="col-lg-3 centered">
                <img class="img img-circle" src="assets/img/team/team02.jpg" height="120px" width="120px" alt="">
                <br>
                <h4><b>Tim Davies</b></h4>
                <a href="#" class="icon icon-twitter"></a>
                <a href="#" class="icon icon-facebook"></a>
                <a href="#" class="icon icon-flickr"></a>
                <p>Tim is an experienced marcoms practitioner and manages projects from inception to delivery. He understands the synergy between great design and commercial effectiveness which shines through on every project.</p>
            </div>
            <!-- col-lg-3 -->

            <div class="col-lg-3 centered">
                <img class="img img-circle" src="assets/img/team/team03.jpg" height="120px" width="120px" alt="">
                <br>
                <h4><b>Michele Lampa</b></h4>
                <a href="#" class="icon icon-twitter"></a>
                <a href="#" class="icon icon-facebook"></a>
                <a href="#" class="icon icon-flickr"></a>
                <p>Be a creative director is a hard task, but Michele loves what she does. Her combination of knowledge and expertise is an important pillar in our agency.</p>
            </div>
            <!-- col-lg-3 -->

            <div class="col-lg-3 centered">
                <img class="img img-circle" src="assets/img/team/team04.jpg" height="120px" width="120px" alt="">
                <br>
                <h4><b>Jaye Smith</b></h4>
                <a href="#" class="icon icon-twitter"></a>
                <a href="#" class="icon icon-facebook"></a>
                <a href="#" class="icon icon-flickr"></a>
                <p>Jaye began making websites when animated logos and scrolling text were cool, but has since found a love for simplicity, creating websites that are a pleasure to browse. Monkey Island Fan.</p>
            </div>
            <!-- col-lg-3 -->

        </div>
        <!-- row -->
    </div>
    <!-- container -->

    <!-- ==== GREYWRAP ==== -->
    <div id="greywrap">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 centered">
                    <img class="img-responsive" src="assets/img/macbook.png" align="">
                </div>
                <div class="col-lg-4">
                    <h2>We Are Hiring!</h2>
                    <p>Do you want to be one of use? Sure you want, because we are an awesome team!. Here we work hard every day to craft pixel perfect sites.</p>
                    <p><a class="btn btn-success">Contact Us</a></p>
                </div>
            </div>
            <!-- row -->
        </div>
        <br>
        <br>
    </div>
    <!-- greywrap -->

    <!-- ==== SECTION DIVIDER3 -->
    <section class="section-divider textdivider divider3">
        <div class="container">
            <h1>DESIGN SOLVE PROBLEMS</h1>
            <hr>
            <p>From the purely practical to the richly philosophical, design is the solution to a host of challenges.</p>
        </div>
        <!-- container -->
    </section>
    <!-- section -->

    <!-- ==== PORTFOLIO ==== -->
    <div class="container" id="portfolio" name="portfolio">
        <br>
        <div class="row">
            <br>
            <h1 class="centered">WE CREATE COOL STUFF</h1>
            <hr>
            <br>
            <br>
        </div>
        <!-- /row -->
        <div class="container">
            <div class="row">

                <!-- PORTFOLIO IMAGE 1 -->
                <div class="col-md-4 ">
                    <div class="grid mask">
                        <figure>
                            <img class="img-responsive" src="assets/img/portfolio/folio01.jpg" alt="">
                            <figcaption>
                                <h5>DASHBOARD</h5>
                                <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
                            </figcaption>
                            <!-- /figcaption -->
                        </figure>
                        <!-- /figure -->
                    </div>
                    <!-- /grid-mask -->
                </div>
                <!-- /col -->


                <!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
						      a modal for each of your projects. -->

                <!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">Project Title</h4>
                            </div>
                            <div class="modal-body">
                                <p>
                                    <img class="img-responsive" src="assets/img/portfolio/folio01.jpg" alt="">
                                </p>
                                <p>This project was crafted for Some Name corp. Detail here a little about your job requirements and the tools used. Tell about the challenges faced and what you and your team did to solve it.</p>
                                <p><b><a href="#">Visit Site</a></b></p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
        -->


                <!-- PORTFOLIO IMAGE 2 -->
        <div class="col-md-4">
            <div class="grid mask">
                <figure>
                    <img class="img-responsive" src="assets/img/portfolio/folio02.jpg" alt="">
                    <figcaption>
                        <h5>UI DESIGN</h5>
                        <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
                    </figcaption>
                    <!-- /figcaption -->
                </figure>
                <!-- /figure -->
            </div>
            <!-- /grid-mask -->
        </div>
        <!-- /col -->

        <!-- PORTFOLIO IMAGE 3 -->
        <div class="col-md-4">
            <div class="grid mask">
                <figure>
                    <img class="img-responsive" src="assets/img/portfolio/folio03.jpg" alt="">
                    <figcaption>
                        <h5>ANDROID PAGE</h5>
                        <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
                    </figcaption>
                    <!-- /figcaption -->
                </figure>
                <!-- /figure -->
            </div>
            <!-- /grid-mask -->
        </div>
        <!-- /col -->
    </div>
    <!-- /row -->

    <!-- PORTFOLIO IMAGE 4 -->
    <div class="row">
        <div class="col-md-4 ">
            <div class="grid mask">
                <figure>
                    <img class="img-responsive" src="assets/img/portfolio/folio04.jpg" alt="">
                    <figcaption>
                        <h5>PROFILE</h5>
                        <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
                    </figcaption>
                    <!-- /figcaption -->
                </figure>
                <!-- /figure -->
            </div>
            <!-- /grid-mask -->
        </div>
        <!-- /col -->

        <!-- PORTFOLIO IMAGE 5 -->
        <div class="col-md-4">
            <div class="grid mask">
                <figure>
                    <img class="img-responsive" src="assets/img/portfolio/folio05.jpg" alt="">
                    <figcaption>
                        <h5>TWITTER STATUS</h5>
                        <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
                    </figcaption>
                    <!-- /figcaption -->
                </figure>
                <!-- /figure -->
            </div>
            <!-- /grid-mask -->
        </div>
        <!-- /col -->

        <!-- PORTFOLIO IMAGE 6 -->
        <div class="col-md-4">
            <div class="grid mask">
                <figure>
                    <img class="img-responsive" src="assets/img/portfolio/folio06.jpg" alt="">
                    <figcaption>
                        <h5>PHONE MOCKUP</h5>
                        <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
                    </figcaption>
                    <!-- /figcaption -->
                </figure>
                <!-- /figure -->
            </div>
            <!-- /grid-mask -->
        </div>
        <!-- /col -->
    </div>
    <!-- /row -->
    <br>
    <br>
    </div>
        <!-- /row -->
    </div>
    <!-- /container -->

    <!-- ==== SECTION DIVIDER4 ==== -->
    <section class="section-divider textdivider divider4">
        <div class="container">
            <h1>DESIGN CREATES EMOTIONAL CONNECTION</h1>
            <hr>
            <p>There’s more to design than meets the eye. It’s when it meets the heart that design creates a meaningful, lasting connection with the audience.</p>
        </div>
        <!-- container -->
    </section>
    <!-- section -->

    <!-- ==== BLOG ==== -->
    <div class="container" id="blog" name="blog">
        <br>
        <div class="row">
            <br>
            <h1 class="centered">WE ARE STORYTELLERS</h1>
            <hr>
            <br>
            <br>
        </div>
        <!-- /row -->

        <div class="row">
            <div class="col-lg-6 blog-bg">
                <div class="col-lg-4 centered">
                    <br>
                    <p>
                        <img class="img img-circle" src="assets/img/team/team04.jpg" width="60px" height="60px">
                    </p>
                    <h4>Jaye Smith</h4>
                    <h5>Published Aug 30.</h5>
                </div>
                <div class="col-lg-8 blog-content">
                    <h2>We Define Success</h2>
                    <p>Armed with insight, we embark on designing the right brand experience that engages the audience. It encompasses both the strategic direction and creative execution that solves a business problem and brings the brand to life.</p>
                    <p>In the create phase, the big idea is unleashed to the world through different media touchpoints. This is when we watch the audience fall in love all over again with our client’s brand.</p>
                    <p><a href="#" class="icon icon-link">Read More</a></p>
                    <br>
                </div>
            </div>
            <!-- /col -->

            <div class="col-lg-6 blog-bg">
                <div class="col-lg-4 centered">
                    <br>
                    <p>
                        <img class="img img-circle" src="assets/img/team/team03.jpg" width="60px" height="60px">
                    </p>
                    <h4>Michele Lampa</h4>
                    <h5>Published Aug 28.</h5>
                </div>
                <div class="col-lg-8 blog-content">
                    <h2>A Beautiful Story</h2>
                    <p>Armed with insight, we embark on designing the right brand experience that engages the audience. It encompasses both the strategic direction and creative execution that solves a business problem and brings the brand to life.</p>
                    <p>In the create phase, the big idea is unleashed to the world through different media touchpoints. This is when we watch the audience fall in love all over again with our client’s brand.</p>
                    <p><a href="#" class="icon icon-link">Read More</a></p>
                    <br>
                </div>
            </div>
            <!-- /col -->
        </div>
        <!-- /row -->
        <br>
        <br>
    </div>
    <!-- /container -->


    <!-- ==== SECTION DIVIDER6 ==== -->
    <section class="section-divider textdivider divider6">
        <div class="container">
            <h1>CRAFTED IN NEW YORK, USA.</h1>
            <hr>
            <p>Some Address 987,</p>
            <p>+34 9884 4893</p>
            <p><a class="icon icon-twitter" href="#"></a>| <a class="icon icon-facebook" href="#"></a></p>
        </div>
        <!-- container -->
    </section>
    <!-- section -->

    <div class="container" id="contact" name="contact">
        <div class="row">
            <br>
            <h1 class="centered">THANKS FOR VISITING US</h1>
            <hr>
            <br>
            <br>
            <div class="col-lg-4">
                <h3>Contact Information</h3>
                <p>
                    <span class="icon icon-home"></span>Some Address 987, NY<br />
                    <span class="icon icon-phone"></span>+34 9884 4893
                    <br />
                    <span class="icon icon-mobile"></span>+34 59855 9853
                    <br />
                    <span class="icon icon-envelop"></span><a href="#">agency@blacktie.co</a>
                    <br />
                    <span class="icon icon-twitter"></span><a href="#">@blacktie_co </a>
                    <br />
                    <span class="icon icon-facebook"></span><a href="#">BlackTie Agency </a>
                    <br />
                </p>
            </div>
            <!-- col -->

            <div class="col-lg-4">
                <h3>Newsletter</h3>
                <p>Register to our newsletter and be updated with the latests information regarding our services, offers and much more.</p>
                <p>
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="inputEmail1" class="col-lg-4 control-label"></label>
                            <div class="col-lg-10">
                                <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="text1" class="col-lg-4 control-label"></label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="text1" placeholder="Your Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-10">
                                <button type="submit" class="btn btn-success">Sign in</button>
                            </div>
                        </div>
                    </form>
                    <!-- form -->
                </p>
            </div>
            <!-- col -->

            <div class="col-lg-4">
                <h3>Support Us</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <!-- col -->

        </div>
        <!-- row -->

    </div>
    <!-- container -->

    <div id="footerwrap">
        <div class="container">
            <h4>Created by <a href="http://blacktie.co">BlackTie.co</a> - Copyright 2014</h4>
        </div>
    </div>
    <!-- Login Modal dialog -->
    <!-- Modal -->
    <div class="modal fade" id="example" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="panel-title">Sign In</h4>
                    <!--<div style="float: right; font-size: 80%; position: relative; top: -10px"><a href="#">Forgot password?</a></div>-->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top: -20px">&times;</button>
                </div>
                <div class="modal-body">

                    <div style="padding-top: 30px" class="panel-body">

                        <div style="display: none" id="login-alert" class="alert alert-danger col-sm-12"></div>

                        <form id="loginform" class="form-horizontal" role="form">

                            <div style="margin-bottom: 25px" class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
                            </div>

                            <div style="margin-bottom: 25px" class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
                            </div>



                            <div class="input-group">
                                <div class="checkbox">
                                    <label>
                                        <input id="login-remember" type="checkbox" name="remember" value="1">
                                        Remember me
                                    </label>
                                </div>
                            </div>


                            <div style="margin-top: 10px" class="form-group">
                                <!-- Button -->

                                <div class="col-sm-12 controls">
                                    <a id="btn-login" href="#" class="btn btn-success">Login  </a>
                                    <a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>

                                </div>
                            </div>


                            <div class="form-group">
                                <div class="col-md-12 control">
                                    <div style="border-top: 1px solid#888; padding-top: 15px; font-size: 85%">
                                        Don't have an account! 
                                        <a href="#" onclick="$('#loginbox').hide(); $('#signupbox').show()">Sign Up Here
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>



                    </div>
                    <div id="signupbox" style="display: none;" class="mainbox col-md-6 col-sm-8 ">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <div class="panel-title">Sign Up</div>
                                <div style="float: right; font-size: 85%; position: relative; top: -10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div>
                            </div>
                            <div class="panel-body">
                                <form id="signupform" class="form-horizontal" role="form">

                                    <div id="signupalert" style="display: none" class="alert alert-danger">
                                        <p>Error:</p>
                                        <span></span>
                                    </div>



                                    <div class="form-group">
                                        <label for="email" class="col-md-3 control-label">Email</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" name="email" placeholder="Email Address">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="firstname" class="col-md-3 control-label">First Name</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" name="firstname" placeholder="First Name">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="lastname" class="col-md-3 control-label">Last Name</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" name="lastname" placeholder="Last Name">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="password" class="col-md-3 control-label">Password</label>
                                        <div class="col-md-9">
                                            <input type="password" class="form-control" name="passwd" placeholder="Password">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="icode" class="col-md-3 control-label">Invitation Code</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" name="icode" placeholder="">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <!-- Button -->
                                        <div class="col-md-offset-3 col-md-9">
                                            <button id="btn-signup" type="button" class="btn btn-info"><i class="icon-hand-right"></i>&nbsp Sign Up</button>
                                            <span style="margin-left: 8px;">or</span>
                                        </div>
                                    </div>

                                    <div style="border-top: 1px solid #999; padding-top: 20px" class="form-group">

                                        <div class="col-md-offset-3 col-md-9">
                                            <button id="btn-fbsignup" type="button" class="btn btn-primary"><i class="icon-facebook"></i>Sign Up with Facebook</button>
                                        </div>

                                    </div>



                                </form>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->


    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
    <script src="Scripts/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="assets/js/retina.js"></script>
    <script type="text/javascript" src="assets/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="assets/js/smoothscroll.js"></script>
    <script type="text/javascript" src="assets/js/jquery-func.js"></script>
    <script src="Scripts/yui-3.14-min.js"></script>
    <script src="lib/bootstrap-modal.js"></script>
    <script>

        YUI().use('app', 'event', function (Y) {
            debugger
            var app = new Y.App();
            var pIndex = 0;
            var pSize = 10;
            localStorage["Pagina"] = pIndex;
            localStorage["Tamanio"] = pSize;

            var button = Y.one("#btn-login");

            // Step 2. Subscribe to its click event with a callback function
            button.on("click", function (e) {
                debugger
                window.location.replace("/MainPage.html");
                //app.navigate('/MainPage.html');

            });

        });

    </script>
</body>
</html>
